<template>
  <div class="wapper">
    <div @click="show = true" class="value">{{ valueMirror || "请输入" }}</div>

    <van-popup
      v-model:show="show"
      safe-area-inset-bottom
      close-on-popstate
      position="bottom"
      get-container="body"
    >
      <div class="search-wapper">
        <!-- <van-search
          v-model="valueMirror"
          placeholder="请输入关键词"
          @input="debouncedInput"
        /> -->

        <van-loading v-if="loading">加载中，请稍候...</van-loading>

        <van-cell v-else-if="searchList.length < 1">暂无匹配项</van-cell>

        <van-cell-group v-else>
          <van-cell
            v-for="item in searchList"
            :key="item.value"
            :title="item.text"
            @click="handleCellClick(item)"
          />
        </van-cell-group>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Loading, Popup, Search, Cell, CellGroup } from 'vant';

export default {
  components: {
    [Popup.name]: Popup,
    [Loading.name]: Loading,
    [Search.name]: Search,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
  },
  emits: ['chooseValue'],
  props: {
    batchIdArr: {
      type: Array,
      required: true,
    },
    batchId: {
      type: [String, Number],
      required: true,
    },
  },
  data() {
    return {
      show: false,
      loading: false,
      searchList: [],
      token: '',
      valueMirror: '',
    };
  },
  watch: {
    batchId(val) {
      if (val) {
        this.valueMirror = val;
      }
    },
    batchIdArr(val) {
      if (val) {
        this.searchList = val;
      }
    },
    immediate: true,
    deep: true,
  },
  methods: {
    handleCellClick(val) {
      this.valueMirror = val.text;
      this.show = false;
      this.$emit('chooseValue', val);
    },
  },
  created() {
    this.token = localStorage.getItem('tokenKey');
  },
};
</script>

<style lang="less" scoped>
.wapper,
.value {
  width: 100%;
  height: 100%;
  text-align: center;
}

.search-wapper {
  height: 50vh;
  display: flex;
  flex-direction: column;

  & > div:last-of-type {
    height: 0;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}
</style>
